<template>
  <div id="gift">
     <scroll :data="giftList" class="gift-wrapper" :pullup="pullup" @pullup="loadData">
         <div class="container">
             <div class="banner">
                <slider>
                    <div v-for="item in recommends">
                    <a>
                        <img class="needsclick"  :src="item">
                    </a>
                    </div>
                </slider>
            </div>
             <div class="pack-list">
                <div class="model" v-for="item in giftList">
                    <div class="main">
                        <div class='icon'>
                            <img  v-lazy="item.mobileicon" alt="" width="80">
                        </div>
                        <div class="content">
                            <div class="name">{{item.game_name}}</div>
                            <div class="gift">{{item.gift_name}}</div>
                            <div class="number">剩余：<span>{{item.over}}</span></div>
                        </div>
                        <div class="down">
                            <span>领取</span>
                        </div>
                    </div>
                    <div class="intro">{{item.introduction}}</div>
                </div>
            </div>
            <div class="loading-container" v-show="loadingShow">
                <loading></loading>
            </div>
         </div>
     </scroll>
  </div>
</template>
<script>
     import scroll from 'components/scroll'
     import loading from 'components/loading'
     import slider from 'components/slider'
    export default{
        data(){
            return{
                giftList:[],
                loadingShow:true,
                isload:false,
                pullup:true,
                recommends: ["http://ks3.17byh.com/images/2017-12-06/5a27b1780884e.jpg","http://ks3.17byh.com/images/2018-01-25/5a696f33cc1bd.jpg","http://ks3.17byh.com/images/2018-01-25/5a698d56cd7dd.jpg"]
            }
        },
        created(){
             this.loadData();
        },
        methods:{
            loadData(){
                this.loadingShow=true;
                //判断是否可以下拉
                if(this.isload==true){
                    return;
                }
                this.isload=true;
                setTimeout(() => {
                    this.$axios.get('/api/gift').then(res=>{
                    this.isload=false;
                    res=res.data.data.data;
                    if(res.length==0){
                        this.giftList=false;
                    }
                    this.giftList=res.concat(this.giftList);
                    console.log(this.giftList);
                    })
                }, 2000);
            }
        },
        mounted(){
            
        },
        components:{
            scroll,
            loading,
            slider
        }
    }
</script>
<style lang="scss" scoped>
    #gift{
        position: fixed;
        top: 48px;
        bottom: 40px;
        width: 100%;
        overflow: hidden;
        .container{
            padding-bottom:30px;
        }
        .gift-wrapper{
            height:100%;
            overflow:hidden;
        }
        .pack-list{
            margin:0 8px;
            margin-top:30px;
        }
        .model{
            padding-bottom:20px;
            &:last-child{
                padding-bottom:0;
            }
            .icon{
                margin-right: 10px;
            }
            .intro{
                font-size: 14px;
                color: #989898;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
                display: inline-block;
                line-height: 22px;
            }
            .main{
                display:flex;
                .content{
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -ms-flex-pack: distribute;
                    justify-content: space-around;
                    overflow: hidden;
                    .name{
                        font-weight: 600;
                        font-size: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #2d2d2d;
                    }
                    .gift,.number{
                        font-size: 14px;
                        color: #989898;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        width: 100%;
                        display: inline-block;
                        line-height: 22px;
                        span{
                            vertical-align: bottom;
                            color: #2d2d2d !important;
                        }
                    }
                }
            }
            .down{
                width: 50px;
                height: 20px;
                line-height: 20px;
                background: orange;
                color: white;
                padding: 5px 0px;
                border-radius: 3px;
                display: inline-block;
                text-align: center;
                font-size: 14px;
            }
        }
        .loading-container{
            text-align:center;
        }
    }
</style>

